<template>
    <router-link :to="{path:'/playMusic',query:{id:id}}" tag=div class="music-buttom-box" >
        <!-- 热搜榜排名 -->
       <div class="NO" v-if="ar" :class="{NoColor:ar&&index<=2}" >{{setIndex(index+1)}}</div>
    <div class="content"> 
        <div class="musicBox">
            <div class="music between">{{name}}<span v-if="alias">{{alias[0]}}</span> </div>
            <!-- 推荐音乐-最新音乐-作者 -->
            <div class="author between" v-if="artists"><i class="SQlogo"></i>{{artists[0].name}}-{{name}}</div>
             <!-- 热搜榜-最新音乐-作者 -->
            <div class="author between" v-if="ar"><i class="SQlogo"></i>{{ar[0].name}}-{{name}}</div>
        </div>                              
        <div class="begainBtn">
            <span class="starBtn"></span>
        </div>
    </div>
    </router-link>
</template>
<script>
export default {
    props:{
        name:String,
        id:Number,
        index:Number,
        artists:Array,
        alias:Array,
        ar:Array,
        cd:String
    },

    methods:{
     setIndex(i){
            return String(i).padStart(2,"0")
        }
    }
}

</script>
<style lang="scss" scoped>
.music-buttom-box{
    display: flex;
    padding-left: 10px;
    color: #333;
    .NO{
        
        display: flex;
        width: 28px;
        font-size: 17px;
        align-items: center;
    }
    .NoColor{
        color: #df3436;
    }
    .content{
        display: flex;
        flex: 1 1 auto;
        position: relative;
        .musicBox{
            padding: 6px 0;
            width: 0;
            flex: 1 1 auto;
            .music{
                padding: 3px 0;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .author{
                font-size: 12px;
                color: #888;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
        .begainBtn{
            display: flex;
            align-items: center;
            padding: 0 10px;
        }
    }
    .content:after{
        width: 200%;
        height: 200%;
        transform: scale(.5);
        border-bottom-width: 1px;
        position: absolute;
        z-index: 2;
        content: "";
        top: 0;
        left: 0;
        pointer-events: none;
        box-sizing: border-box;
        width: 200%;
        height: 200%;
        -webkit-transform-origin: top left;
        transform-origin: top left;
        border-bottom: 1px solid rgba(0,0,0,.1);
    }
 
        .starBtn{
            background: url(//s3.music.126.net/m/s/img/index_icon_2x.png?5207a28…) no-repeat;
            background-size: 166px 97px;
            display: inline-block;
            width: 22px;
            height: 22px;
            background-position: -24px 0;
            
            
        }
    
    
}
.SQlogo{
    display: inline-block;
    width: 12px;
    height: 8px;
    margin-right: 4px;
    background: url(//s3.music.126.net/m/s/img/index_icon_2x.png?5207a28…) no-repeat;
    background-size: 166px 97px;
}
</style>
